<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../01/vue.js"></script>
</head>
<style>
    .app{
         background-color: #EEEEEE; 
         width: 400px;
         margin: 0 auto;
         border: 1px solid #EEEEEE;
    }
    .app-one{
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin: 1px 0 10px 0;
        background-color: white;
    }
    .gou{
        display: flex;
        align-items: center;
    }
    #run{
        background-color: red;
    }
    .left{
        width: 35%;
        height: 140px;
        /* background-color: skyblue; */
        margin: 0 10px;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 60%;
        font-size: 14px;

    }
    p{
        margin: 0;
    }
    .num{
        display: flex;
    }
    button{
        background-color: white;
        border: 1px solid #999;
        width: 24px;
    }
    .num>div{
        border-top:1px solid #999;
        border-bottom:1px solid #999;
        width: 24px;
       text-align: center;
       font-size: 13px;
    }
    .botton{
        display: flex;
        justify-content: space-between;
    }
    select{
        width: 180px;
        background-color: rgb(249, 249, 249);
        border-color:rgba(233, 227, 227, 0.756) ;
    }
    .app-two{
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
        height: 50px;
        align-items: center;
        box-shadow: 0px -1px 0px 0px white;
        margin-top:120px;
    }
    .two-left{
        color: #ABABAB;
        font-size: 14px;
    }
    .two-right{
        height: 100%;
        display: flex;
        align-items: center;
        color: rgb(201, 36, 36);
    }
    .two-right>div{
        background-color: rgb(201, 36, 36);
        height: 100%;
        color: white;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<body>
    <div class="app">
        <div class="app-one">
            <div class="gou"><input type="checkbox" name="running" id="run" checked></div>
            <div class="left"><img src="./icon/O1CN010DRPdr1vWwgv0zK5L_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></div>
            <div class="right">
                <p>黑科技分区控温,95%鹅绒抗菌儿童鹅绒被</p>
              <select name="" id="">
                  <option value="">白色:春秋款:羽绒填充350                </option>
                  <option value="">2</option>
                  <option value="">3</option>
                  <option value="">4</option>
              </select>
              <div class="botton">
                  <span>￥599</span>
                  <div class="num">
                     <button>-</button>
                      <div>1</div>
                      <button>+</button>
                  </div>
              </div>
            </div>
        </div>
        <div class="app-one">
            <div class="gou"><input type="checkbox" name="running" id="run" checked></div>
            <div class="left"><img src="./icon/O1CN010DRPdr1vWwgv0zK5L_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></div>
            <div class="right">
                <p>黑科技分区控温,95%鹅绒抗菌儿童鹅绒被</p>
              <select name="" id="">
                  <option value="">白色:春秋款:羽绒填充350                </option>
                  <option value="">2</option>
                  <option value="">3</option>
                  <option value="">4</option>
              </select>
              <div class="botton">
                  <span>￥599</span>
                  <div class="num">
                     <button>-</button>
                      <div>1</div>
                      <button>+</button>
                  </div>
              </div>
            </div>
        </div>
        <div class="app-two">
            <div class="two-left">
                <div class="gou"><input type="checkbox" name="running" id="run" checked>已选</div>
            </div>
            <div class="two-right">
                <span>合计:￥1198</span>
                <div>下单</div>
            </div>
        </div>
    </div>
</body>
</html>